import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router' //1
Vue.config.productionTip = false
Vue.use(VueRouter) //2
import About from '@/components/About'
import Contacts from '@/components/Contacts'
import UI_Router from '@/components/UI_Router'
import Alice from '@/views/Alice'
import All_contacts from '@/views/All_contacts'
import Bob from '@/views/Bob'
import blog from '@/sanji/blog'
import fax from '@/sanji/fax'
//3
const routes = [
    {
        path: '/', //路径
        redirect: '/UI_Router', //组件名字
    },
    {
        path: '/UI_Router',
        component: UI_Router,
    },
    {
        path: '/Contacts',
        component: Contacts,
        children: [
            {
                path: '/Alice',
                component: Alice,
            },
            {
                path: '/All_contacts',
                component: All_contacts,
            },
            {
                path: '/Bob',
                component: Bob,
                children: [
                    {
                        path: '/blog',
                        component: blog,
                    },
                    {
                      path: '/fax',
                      component: fax,
                  },
                ],
            },
        ],
    },
    {
        path: '/About',
        component: About,
    },
]
//4
const router = new VueRouter({
    routes,
})
//5
new Vue({
    router,
    render: (h) => h(App),
}).$mount('#app')
